<template>
  <div class="full-box d-flex-c">
    <BKTabs
      v-model="currentTab"
      :data="tabs"
      class="tab"
      ref="tab"
    />

    <div class="flex-1 overflow-hidden">
      <div
        class="d-flex-c full-box"
        v-show="currentTab === '1'"
      >
        <div class="p-h-mini">
          <BKInput
            v-model="keywords1"
            size="mini"
            class="m-b-mini"
            suffix-icon="el-icon-search"
          />
        </div>
        <BKTree
          v-model="lyCurrent"
          node-key="id"
          ref="tree1"
          :mock="lyData"
          default-expand-all
          multiple
          @check-change="checkLyData"
          check-strictly
          class="flex-1 overflow-hidden p-h-mini p-b-mini"
          :filter-node-method="filterNode"
        />
      </div>
      <div
        class="d-flex-c full-box"
        v-show="currentTab === '2'"
      >
        <div class="p-h-mini">
          <BKInput
            v-model="keywords2"
            size="mini"
            class="m-b-mini"
            suffix-icon="el-icon-search"
          />
        </div>
        <BKTree
          v-model="xzCurrent"
          node-key="id"
          ref="tree2"
          :mock="xzData"
          :default-expanded-keys="defaultExpandedKeys"
          multiple
          @check-change="checkXzData"
          check-strictly
          class="flex-1 overflow-hidden p-h-mini p-b-mini"
          :filter-node-method="filterNode"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { debounce } from 'throttle-debounce'
export default {
  name: 'BoundaryPanel',
  data () {
    return {
      currentTab: '1',
      tabs: [
        { name: '1', label: '流域水系' },
        { name: '2', label: '行政区域' }
      ],
      lyData: [],
      xzData: [],
      defaultExpandedKeys: [],
      keywords1: '',
      keywords2: '',
      lyCurrent: [],
      xzCurrent: []
    }
  },
  created () {
    this.getLyData()
    this.getXzData()
    this.debounceChangeUpdating = debounce(800, this.changeUpdating)
    this.$root.$on('updateMapMaking', this.updateMapMaking)
  },
  beforeDestroy () {
    this.$root.$off('updateMapMaking', this.updateMapMaking)
  },
  computed: {
    ...mapState('map-making', ['boundaryLayer'])
  },
  watch: {
    keywords1 (v) {
      this.$refs.tree1.filter(v)
    },
    keywords2 (v) {
      this.$refs.tree2.filter(v)
    },
    lyCurrent (v) {
      this.$store.commit('map-making/setBoundaryLayer', Object.assign(this.boundaryLayer, { lyCurrent: v }))
    },
    xzCurrent (v) {
      this.$store.commit('map-making/setBoundaryLayer', Object.assign(this.boundaryLayer, { xzCurrent: v }))
    }
  },
  methods: {
    updateMapMaking () {
      this.lyCurrent = this.boundaryLayer.lyCurrent
      this.xzCurrent = this.boundaryLayer.xzCurrent
      this.updating = true
    },
    changeUpdating () {
      this.updating = false
    },
    async getLyData () {
      const data = await this.$request.post('/tree/data', {
        appId: 'YSJC',
        bzCode: 'YSJC',
        node: 'ROOT',
        queryParam: { bzCode: 'YSJC' },
        treeConfigId: 'ATT_RV_TREE'
      })
      this.lyData = data
    },
    async checkLyData (data, value) {
      if (!value) {
        this.$emit('addMapItem', { layerId: 'ly-' + data.id, kjdx: null, value, layerName: '流域水系', updating: this.updating })
        this.debounceChangeUpdating()
        return
      }
      const { rows } = await this.$request.singleTableOperation({
        url: '/grid/getTableData',
        metaSet: 'ATT_BAS_BASE',
        methodCode: 'select',
        methodParams: {
          queryParam: { BAS_CODE: data.id }
        }
      })
      if (rows[0]) {
        this.$emit('addMapItem', { layerId: 'ly-' + data.id, kjdx: rows[0].KJDX, value, layerName: '流域水系', updating: this.updating })
        this.debounceChangeUpdating()
      }
    },
    async getXzData () {
      const data = await this.$request.post('/tree/data', {
        appId: 'YSJC',
        bzCode: 'YSJC',
        node: 'ROOT',
        queryParam: { bzCode: 'YSJC' },
        treeConfigId: 'YSQJC_JC_XZQ'
      })
      this.xzData = data
      const list = []
      this.$utils.flattenList(data, list)
      // this.defaultExpandedKeys = list.filter(item => item.fid === '130000').map(item => item.id)
      this.defaultExpandedKeys = list.filter(item => item.fid === 'ROOT').map(item => item.id)
    },
    async checkXzData (data, value) {
      if (!value) {
        this.$emit('addMapItem', { layerId: 'xz-' + data.id, kjdx: null, value, layerName: '行政区域', updating: this.updating })
        this.debounceChangeUpdating()
        return
      }
      const { rows } = await this.$request.singleTableOperation({
        url: '/grid/getTableData',
        metaSet: 'WATF_B_SYS_XZQ',
        methodCode: 'select',
        methodParams: {
          queryParam: { XZQDM: data.id }
        }
      })
      if (rows[0]) {
        this.$emit('addMapItem', { layerId: 'xz-' + data.id, kjdx: rows[0].XZQ_WKT, value, layerName: '行政区域', updating: this.updating })
        this.debounceChangeUpdating()
      }
    },
    filterNode (value, data) {
      return data.label.includes(value)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  ::v-deep .el-tabs__nav-wrap {
    background: #f3f6f9;
    padding: 0 10px;

    &::after {
      display: none;
    }

    .el-tabs__item {
      height: 38px;
      line-height: 38px;
      font-size: 16px;
      color: #76778e;
      width: 84px;
      text-align: center;
      padding: 0;

      &.is-active {
        color: #333;
      }

      &:hover {
        color: #333;
      }
    }

    .el-tabs__active-bar {
      background-color: #0080ff;
      height: 3px;
      bottom: 1px;
      width: 84px !important;
    }
  }

  ::v-deep .el-tabs__header {
    margin-bottom: 10px;
  }
}
</style>
